<template>
  <view class="con">
    <view class="main" v-for="(item,index) in courseList" :key="index">
      <view class="main_1 flex">
        <view class="main_1z">{{item.title}}</view>
        <view class="main_1y">￥<text>{{item.price}}</text></view>
      </view>
      <view class="main_2">
        <view class="main_2_1 flex">
          <view class="main_2_1_v1">步骤一：</view>
          <view class="main_2_1_v2">复制下方链接，微信访问</view>
        </view>
        <view class="main_2_2">{{item.url}}</view>
      </view>
      <view class="main_3 flex">
        <view class="main_3z" @click="copyText(item.url)">复制</view>
        <view class="main_3y">访问密码: {{item.pwd}}</view>
      </view>
      <view class="main_2">
        <view class="main_2_1 flex">
          <view class="main_2_1_v1">步骤二：</view>
          <view class="main_2_1_v2">仔细阅读教程，并添加教程里面的负责人的二维码，进陪跑群</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
  	getCourseMycourse //获取我的课程
  } from '@/request/api.js'
  export default {
    data() {
      return {
        openid: uni.getStorageSync('openid'),
        // openid: 'oycWz5SBi1rMTuqdQhLy4iSvgHjU', //获取缓存的openid
        isLogin: uni.getStorageSync('isLogin') || 1, //是否登录授权 1是未授权；2是已授权
        // url:'https://y05kifbrzw0.feishu.cn/docx/Gdz0dpSX5o8Yl0x4BhDc5ObKnu1',
        page:1,//页码
        courseList:[],
        total:0,//总共的数量
        pagesizes:15//每页数量
      };
    },
    onLoad() {
      this.getCourseMycourseFun() //获取我的课程
    },
    onReachBottom() {
      let totolPage =Math.ceil(this.total / this.pagesizes) 
      console.log('总共多少页')
      console.log(totolPage)
      if(this.page<=totolPage){
        this.loadMore(); // 当上拉时加载更多数据
      }
    },
    methods:{
      // 获取我的课程
      getCourseMycourseFun(){
        let param = {
          openid:this.openid,
          page:this.page
        }
        getCourseMycourse(param).then(res=>{
          console.log('获取我的课程')
          console.log(res)
          if(res.error_code===0){
            this.total = Number(res.data.total);
            this.pagesizes = Number(res.data.pagesizes);
            let listRe = res.data.arrList
            if(listRe.length>0){
              this.courseList = this.courseList.concat(listRe);
            }
          }else{
            uni.showToast({
            	icon: 'none',
            	title: res.msg
            })
          }
        })
      },
      // 加载更多
      loadMore(){
        this.page = this.page+1
        this.getCourseMycourseFun()
      },
      // 点击"复制"
      copyText(url){
        uni.setClipboardData({
          data: url,
          success: function () {
            uni.showToast({
              title: '复制成功',
              icon: 'success',
              duration: 2000
            });
          }
        });
      },
    }
  }
</script>

<style scoped lang="scss">
.main{
  width: 100%;
  height: auto;
  border-radius: 20rpx;
  background-color: rgba(255,255,255,1);
  padding: 40rpx 30rpx;
  box-sizing: border-box;
  margin-bottom: 20rpx;
  .main_1{
    width: auto;
    height: 76rpx;
    margin-bottom: 36rpx;
    .main_1z{
      background-color: rgba(249,191,65,1);
      height: 76rpx;
      line-height: 76rpx;
      padding-left: 26rpx;
      padding-right: 100rpx;
      color: rgba(16,16,16,1);
      font-size: 28rpx;
      font-weight: bold;
    }
    .main_1y{
      height: 76rpx;
       line-height: 76rpx;
      border-radius: 0px 100rpx 100rpx 0px;
      background-color: rgba(0,0,0,1);
      color: rgba(255,255,255,1);
      font-size: 24rpx;
      padding-left: 22rpx;
      padding-right: 40rpx;
      text{
        font-family: 'AvantGardeFont';
        font-size:40rpx;
      }
    }
  }
  .main_2{
    margin-bottom: 40rpx;
    .main_2_1{
      height: 40rpx;
      line-height: 40rpx;
      color: rgba(0,0,0,1);
      font-size: 28rpx;
      margin-bottom: 8rpx;
      align-items: normal;
      .main_2_1_v1{
        width: 120rpx;
        font-weight: bold;
      }
      .main_2_1_v2{
        width: 530rpx;
      }
    }
    .main_2_2{
      line-height: 40rpx;
      color: rgba(0,0,0,1);
      font-size: 24rpx;
      width: 100%;
      word-break: break-all;
    }
  }
  .main_3{
    width: 100%;
    height: auto;
    margin-bottom: 60rpx;
    .main_3z{
      width: 160rpx;
      height: 44rpx;
      line-height: 44rpx;
      border-radius: 40px;
      background-color: rgba(249,191,65,1);
      color: rgba(0,0,0,1);
      font-size: 28rpx;
      text-align: center;
      margin-right: 32rpx;
    }
    .main_3y{
      color: rgba(0,0,0,1);
      font-size: 28rpx;
    }
  }
}
</style>
